<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作模拟</title>
    <script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="/js/dom/domTest.js"></script>
    <style type="text/css">
        .myButton{
            background-color: antiquewhite;
            color: aquamarine;
        }
    </style>
</head>
<body>

	<b id="b1" style="background-color: gray;">hello</b>
    <input type="button" id="btn1" value="button" style="background-color: beige">
	<div id="div1" name="div1" style="background-color: orange;">div1</div>
	<div id="div2" name="div2" style="background-color: yellow;">div2</div>

	<ul id="ul">
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>

	<fieldset>
		<legend>内部插入节点(插入子节点)</legend>
		<input value="append" type="button" id="test_append"/>
		<input value="appendTo" type="button" id="test_appendTo"/>
		<input value="prepend" type="button" id="test_prepend"/>
		<input value="prependTo" type="button" id="test_prependTo"/>
	</fieldset>

	<fieldset>
		<legend>外部插入节点(插入兄弟节点)</legend>
		<input value="after" type="button" id="test_after"/>
		<input value="before" type="button" id="test_before"/>
		<input value="insertAfter" type="button" id="test_insertAfter"/>
		<input value="insertBefore" type="button" id="test_insertBefore"/>
	</fieldset>

	<fieldset>
		<legend>jquery删除节点</legend>
		<input type="button" id="test_removeNode" value="删除节点" />
		<input type="button" id="test_emptyNode" value="删除子节点" />
	</fieldset>

	<fieldset>
		<legend>jquery克隆节点,替换节点</legend>
		<input type="button" id="test_clone" value="克隆节点" />
		<input type="button" id="test_replace1" value="替换节点" />
		<input type="button" id="test_replace2" value="替换节点" myattr="myValue"/>
	</fieldset>

	<fieldset>
		<legend>jquery属性操作</legend>
		<input type="button" id="test_getterAttr" value="获取属性值"/>
		<input type="button" id="test_setterAttr" value="设置属性值"/>
	</fieldset>

	<fieldset>
		<legend>jquery CSS操作</legend>
		<input type="button" id="test_addClass" value="添加Css"/>
		<input type="button" id="test_removeClass" value="删除Css"/>
		<input type="button" id="test_togggleClass" value="轮换Css"/>
		<input type="button" id="test_hasClass" class="myButton" value="判读是否存在Css"/>
	</fieldset>
</body>
</html>